import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

/**
 * Geometry
 */
const geometry = new THREE.BoxGeometry(1, 1, 1)

/**
 * Matetrial
 */
const material = new THREE.MeshBasicMaterial({
    color: 'orange'
})

/**
 * Mesh
 */
const mesh = new THREE.Mesh(geometry, material)

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 3

/**
 * Scene
 */
const scene = new THREE.Scene()
scene.add(mesh)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)




/**
 * OrbitControls
 */
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true 



/**
 * Update
 */
const tick = () => {
    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()